<template>
  <div class="resume-page">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="10" animated />
    </div>

    <!-- 错误状态 -->
    <div v-else-if="error" class="error-container">
      <el-result icon="error" title="加载失败" :sub-title="error">
        <template #extra>
          <el-button type="primary" @click="loadResumeData">重试</el-button>
        </template>
      </el-result>
    </div>

    <!-- 简历内容 -->
    <div v-else-if="resumeData && resumeData.images && resumeData.images.length > 0" class="resume-content">
      <div class="resume-document-viewer" v-loading="loading">
        <!-- 控制按钮 -->
        <div class="document-controls">
          <el-button 
            v-if="resumeData && resumeData.pdf && resumeData.pdf.url" 
            @click="downloadPdf" 
            type="primary"
            class="pdf-download-btn"
          >
            <el-icon><Document /></el-icon>
            下载PDF简历
          </el-button>
          
          <el-button @click="printResume">
            <el-icon><Printer /></el-icon>
            打印简历
          </el-button>
          
          <el-button @click="resetZoom">
            <el-icon><ZoomIn /></el-icon>
            重置缩放
          </el-button>
          
          <el-button @click="toggleFullscreen">
            <el-icon><FullScreen /></el-icon>
            全屏查看
          </el-button>
        </div>
        
        <!-- 缩放控制 -->
        <div class="zoom-controls">
          <el-button @click="zoomOut" :disabled="zoomLevel <= 0.5" circle>
            <el-icon><Minus /></el-icon>
          </el-button>
          
          <span class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
          
          <el-button @click="zoomIn" :disabled="zoomLevel >= 2" circle>
            <el-icon><Plus /></el-icon>
          </el-button>
        </div>
        
        <!-- 简历文档内容 -->
        <div 
          ref="documentContainer" 
          class="document-container" 
          :style="{ transform: `scale(${zoomLevel})` }"
        >
          <div class="document-pages">
            <div 
              v-for="(image, index) in resumeData.images" 
              :key="index"
              class="document-page"
              :data-page="index + 1"
            >
              <img 
                :src="image.url" 
                :alt="`简历第 ${index + 1} 页`"
                class="document-image"
                @load="handleImageLoad"
                @error="handleImageError"
              />
              <!-- 页码标记 -->
              <div class="page-number">{{ index + 1 }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 无数据状态 -->
    <div v-else class="empty-container">
      <el-empty 
        description="暂无简历数据" 
        :image="resumeData && resumeData.pdf ? '' : undefined"
      >
        <template #extra v-if="resumeData && resumeData.pdf">
          <el-button type="primary" @click="downloadPdf">
            <el-icon><Document /></el-icon>
            下载PDF简历
          </el-button>
        </template>
      </el-empty>
    </div>
  </div>
</template>

<script setup lang="ts">
// 图标导入
const { ZoomIn, Printer, FullScreen, Minus, Plus, Document } = await import(
  "@element-plus/icons-vue"
);

// 响应式数据
const loading = ref(true);
const error = ref("");
const resumeData = ref<any>(null);
const documentContainer = ref<HTMLElement | null>(null);
const zoomLevel = ref(1);
const imagesLoaded = ref(0);
const totalImages = ref(0);

// 加载简历数据
const loadResumeData = async () => {
  loading.value = true;
  error.value = "";

  try {
    const response = await $fetch<{
      success: boolean;
      message: string;
      data: any;
    }>("/api/home/resume");

    if (response.success) {
      resumeData.value = response.data;
      totalImages.value = response.data.images?.length || 0;
      imagesLoaded.value = 0;
      // 重置缩放级别
      zoomLevel.value = 1;
    } else {
      error.value = response.message || "获取简历数据失败";
    }
  } catch (err: any) {
    console.error("加载简历数据失败:", err);
    error.value = err.message || "网络错误，请稍后重试";
  } finally {
    loading.value = false;
  }
};

// 图片处理方法
const handleImageError = () => {
  ElMessage.error("图片加载失败，请稍后重试");
};

const handleImageLoad = () => {
  imagesLoaded.value++;
  if (imagesLoaded.value === totalImages.value) {
    // 所有图片加载完成
    ElMessage.success("简历加载完成");
  }
};

// 下载PDF简历
const downloadPdf = () => {
  if (!resumeData.value?.pdf?.url) {
    ElMessage.warning("没有可下载的PDF简历");
    return;
  }
  
  try {
    const link = document.createElement("a");
    link.href = resumeData.value.pdf.url;
    link.download = resumeData.value.pdf.name || "简历.pdf";
    link.target = "_blank"; // 在新标签页打开，而不是直接下载
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    ElMessage.success("PDF简历下载中...");
  } catch (error) {
    console.error("下载PDF简历失败:", error);
    ElMessage.error("下载PDF简历失败");
  }
};



// 打印简历
const printResume = () => {
  window.print();
};

// 缩放控制
const zoomIn = () => {
  if (zoomLevel.value < 2) {
    zoomLevel.value = Math.min(zoomLevel.value + 0.1, 2);
  }
};

const zoomOut = () => {
  if (zoomLevel.value > 0.5) {
    zoomLevel.value = Math.max(zoomLevel.value - 0.1, 0.5);
  }
};

const resetZoom = () => {
  zoomLevel.value = 1;
  // 滚动到顶部
  documentContainer.value?.scrollIntoView({ behavior: "smooth" });
};

// 全屏查看
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
};

// 键盘导航事件处理
const handleKeydown = (e: KeyboardEvent) => {
  if (e.key === "ArrowUp" || e.key === "PageUp") {
    e.preventDefault();
    if (documentContainer.value) {
      documentContainer.value.scrollTop -= 300;
    }
  } else if (e.key === "ArrowDown" || e.key === "PageDown") {
    e.preventDefault();
    if (documentContainer.value) {
      documentContainer.value.scrollTop += 300;
    }
  } else if (e.key === "+" || e.key === "=") {
    e.preventDefault();
    zoomIn();
  } else if (e.key === "-" || e.key === "_") {
    e.preventDefault();
    zoomOut();
  } else if (e.key === "0") {
    e.preventDefault();
    resetZoom();
  } else if (e.key === "p") {
    e.preventDefault();
    printResume();
  } else if (e.key === "f") {
    e.preventDefault();
    toggleFullscreen();
  }
};

// 页面加载时获取数据和添加事件监听器
onMounted(() => {
  loadResumeData();
  // 添加键盘事件监听
  window.addEventListener("keydown", handleKeydown);
});

// 页面卸载时移除事件监听器
onUnmounted(() => {
  // 移除键盘事件监听
  window.removeEventListener("keydown", handleKeydown);
});

// 页面元数据
useHead({
  title: "个人简历 - 博客系统",
});
</script>

<style scoped>
.resume-page {
  max-width: 1200px;
  margin: 90px auto 0 auto;
  padding: 2rem;
  line-height: 1.6;
}

.loading-container,
.error-container,
.empty-container {
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.resume-content {
  width: 100%;
}

.resume-document-viewer {
  width: 100%;
  height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* 控制按钮 */
.document-controls {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.5rem 1rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  flex-wrap: wrap;
  border-radius: 12px 12px 0 0;
}

.document-controls .el-button {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.document-controls .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.document-controls .pdf-download-btn {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  border-color: #ff6b6b;
  font-weight: 600;
}

.document-controls .pdf-download-btn:hover {
  background: linear-gradient(135deg, #ff5252 0%, #e53e3e 100%);
  border-color: #ff5252;
  box-shadow: 0 6px 16px rgba(255, 107, 107, 0.4);
}

.zoom-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.92));
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.zoom-level {
  min-width: 60px;
  text-align: center;
  font-weight: 700;
  color: #2563eb;
  font-size: 16px;
  padding: 0.25rem 0.5rem;
  background: rgba(37, 99, 235, 0.08);
  border-radius: 6px;
}

/* 文档容器 */
.document-container {
  flex: 1;
  overflow-y: auto;
  padding: 3rem 2rem;
  transition: transform 0.3s ease;
  transform-origin: center top;
  background: transparent;
  margin: 0;
  border-radius: 0 0 12px 12px;
}

.document-pages {
  max-width: 900px;
  margin: 0 auto;
}

.document-page {
  margin-bottom: 3rem;
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  transition: transform 0.3s ease;
}

.document-page:last-child {
  margin-bottom: 0;
}

.document-page:hover {
  transform: translateY(-2px);
}

.document-image {
  width: 100%;
  height: auto;
  display: block;
  transition: all 0.3s ease;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.document-image:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.page-number {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.5));
  color: white;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 滚动条美化 */
.document-container::-webkit-scrollbar {
  width: 10px;
}

.document-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 10px;
}

.document-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  transition: background 0.3s ease;
}

.document-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* 打印样式 */
@media print {
  .resume-page {
    padding: 0;
    max-width: none;
  }
  
  .document-controls,
  .zoom-controls {
    display: none !important;
  }
  
  .resume-document-viewer {
    height: auto;
    box-shadow: none;
    background: transparent;
  }
  
  .document-container {
    box-shadow: none;
    margin: 0;
    padding: 0;
    transform: none !important;
    background: transparent;
  }
  
  .document-page {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: 0;
    page-break-after: always;
  }
  
  .document-image {
    box-shadow: none;
    border-radius: 0;
  }
  
  .page-number {
    display: none;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .resume-page {
    padding: 1rem;
  }

  .resume-document-viewer {
    height: calc(100vh - 150px);
  }

  .document-container {
    padding: 2rem 1rem;
    margin: 0;
  }

  .document-controls {
    padding: 1rem 0.75rem;
    gap: 1rem;
  }

  .document-controls .el-button {
    font-size: 13px;
    padding: 8px 12px;
  }

  .zoom-controls {
    padding: 0.75rem;
    gap: 0.5rem;
  }

  .document-page {
    margin-bottom: 2rem;
  }

  .page-number {
    bottom: 15px;
    right: 15px;
    font-size: 13px;
    padding: 5px 10px;
  }
}

@media (max-width: 480px) {
  .resume-page {
    padding: 0.5rem;
  }

  .document-controls {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
  }

  .document-controls .el-button {
    width: 100%;
  }

  .zoom-controls {
    order: 1;
  }

  .document-container {
    padding: 1.5rem 0.75rem;
  }

  .document-page {
    margin-bottom: 1.5rem;
  }

  .page-number {
    bottom: 12px;
    right: 12px;
    font-size: 12px;
    padding: 4px 8px;
  }
}

/* 暗色主题适配 */
.dark .resume-document-viewer {
  background-color: transparent;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.dark .document-controls {
  background: linear-gradient(to bottom, rgba(30, 41, 59, 0.95), rgba(30, 41, 59, 0.9));
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.dark .zoom-controls {
  background: linear-gradient(to bottom, rgba(30, 41, 59, 0.9), rgba(30, 41, 59, 0.85));
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.dark .zoom-level {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.15);
}

.dark .document-container {
  background: transparent;
}

.dark .document-page {
  background: transparent;
}

.dark .document-image {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.dark .document-image:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.dark .page-number {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65));
}

.dark .document-container::-webkit-scrollbar-track {
  background: #1e293b;
}

.dark .document-container::-webkit-scrollbar-thumb {
  background: #475569;
}

.dark .document-container::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}
</style>
